<template>
  <div class="main">
    <div class="summOut">
      <scrollerEdit lock-x>
        <div class="ouerImgWrap">
          <span class="posBack" @click="backToPrev">
            <i class="posImg"></i>
          </span>
          <img class="summImg" src="https://static.shengxue985.com/sxzx_app/h5/activity/mnzytb.png" alt />
          <div style="height: 1.5rem;"></div>
        </div>
      </scrollerEdit>
      <div class="create-btn">
        <span @click="gotos">开始填报</span>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="show15" position="bottom">
        <div class="popupBoxWrap">
          <span class="title flex-h">
            <b class="flex1">选择版本</b>
            <img @click="show15 = false" src="~/static/images/volunteer_icon_close.png" alt />
          </span>
          <span class="popupBoxs" @click="hasBalanceHistory">
            <b>老高考版</b>
            <i>适合于通过文理选科模式下的志愿填报策略</i>
          </span>
          <span class="popupBoxs popup2" @click="hasBalanceHistoryZj">
            <b>新高考版</b>
            <i>适合于7选3、6选3、以及3+1+2选科模式下的志愿填报策略</i>
          </span>
        </div>
      </popup>
    </div>
    <LoginVerification :isShowModal="isShowModal" v-on:fromChildloginVerification="loginVers" headTitle="志愿填报服务"></LoginVerification>
  </div>
</template>
<script>
import ls from 'store2'
import { getBalanceHistory, getBalanceHistoryZj } from '~/api/volunteer'
import { getTeacherUserInfoById, getUserInfoById } from '~/api/identity'
import { identityLogin } from '~/api/identity'
import { TransferDom, Popup } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import LoginVerification from '~/components/LoginVerification'
import { format } from '~/plugins/filter'
import { backAppOrWx } from '~/common/common'
export default {
  head: {
    title: '志愿填报',
  },
  directives: {
    TransferDom,
  },
  components: {
    Popup,
    scrollerEdit,
    LoginVerification,
  },
  data() {
    return {
      isShowModal: false,
      show15: false,
      showNext: false,
      userType: '',
      listRecord: 0,
      listnoRecord: 0,
      listZjRecord: 0,
      listnoZjRecord: 0,
    }
  },
  created() {},
  mounted: function() {
    this.$visit(this.$route.path)
    this.commonJs.accectAppParame()
    if (ls.get('yxkData')) {
      this.showuserAreas()
    } else {
      this.isShowModal = true
    }
  },
  destroyed() {},
  methods: {
    loginVers(data) {
      identityLogin(data)
        .then((res) => {
          if (res.code === '0') {
            let usersData = res.data
            ls.set('yxkData', usersData)
            ls.set('userType', usersData.userType)
            ls.set('tokensyxk', usersData.accessToken)
            this.isShowModal = false
            this.$vux.toast.text('服务授权成功')
            this.showuserAreas()
          } else {
            this.$vux.toast.text(res.message)
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    //查看卡劵是否生成方案

    hasBalanceHistory() {
      this.$loading('open')
      getBalanceHistory(ls.get('userType'))
        .then((res) => {
          if (res.code == '0') {
            let length = res.data.length
            if (length) {
              this.commonJs.gopush('programrecord')
            } else {
              this.commonJs.gopush('stepOne')
            }
          }
          this.$hideLoading()
        })
        .catch((error) => {
          this.$hideLoading()
        })
    },
    hasBalanceHistoryZj() {
      this.$loading('open')
      getBalanceHistoryZj(ls.get('userType'))
        .then((res) => {
          if (res.code == '0') {
            let length = res.data.length
            if (length) {
              this.commonJs.gopush('../zhejiang/programrecord')
            } else {
              this.commonJs.gopush('../zhejiang/stepOne')
            }
          }
          this.$hideLoading()
        })
        .catch((error) => {
          this.$hideLoading()
        })
    },
    showuserAreas() {
      if (ls.get('userArea')) {
        return false
      }
      getUserInfoById({ uid: ls.get('yxkData').userVoId })
        .then((res) => {
          let areas = res.data.area
          let areaArr = areas.split(',')
          let userArea = areaArr[0]

          ls.set('userArea', userArea)
          this.$hideLoading()
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    gotos() {
      this.show15 = true
    },
    backToPrev() {
      backAppOrWx()
    },
  },
}
</script>

<style scoped lang="less">
.popupBoxWrap {
  width: 7.5rem;
  height: 6rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.2rem 0.2rem 0px 0px;
  padding: 0.4rem 0.3rem;
  box-sizing: border-box;

  .title {
    height: 0.8rem;
    line-height: 0.8rem;

    b {
      font-size: 0.36rem;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      vertical-align: middle;
    }

    img {
      vertical-align: middle;
      width: 0.4rem;
      height: 0.4rem;
      display: inline-block;
      // float: right;
    }
  }

  .popupBoxs {
    margin-top: 0.3rem;
    width: 100%;
    height: 1.4rem;
    display: block;
    border-radius: 0.1rem;
    border: 0.02rem solid rgba(229, 232, 237, 1);
    padding: 0.3rem 0;
    box-sizing: border-box;

    b,
    i {
      display: block;
      text-align: center;
    }

    b {
      font-size: 0.3rem;
      color: rgba(34, 34, 34, 1);
      margin-bottom: 0.1rem;
    }

    i {
      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
  .popup2 {
    height: 1.8rem;
  }
}

.ouerImgWrap {
  width: 7.5rem;
  height: auto;
  position: relative;

  .posBack {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    left: 0.2rem;
    top: 0.2rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;

    .posImg {
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin: 0.2rem auto;
      background: url('~@/static/sprite/icon_sprites_40.png') -0.7rem -0.1rem;
      background-size: 3rem 2.4rem;
    }
  }
}

.fixadBot {
  width: 7.5rem;
  overflow: hidden;
  position: fixed;
  max-height: 2rem;
  height: 1.5rem;
  bottom: 0rem;
  z-index: 100;

  span {
    display: block;
    width: 3.2rem;
    height: 0.8rem;
    background: @mainColor;
    border-radius: 0.1rem;
    font-size: 0.36rem;

    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 0.8rem;
    text-align: center;
    margin: 0.2rem auto 0.2rem;
  }
}

.summOut {
  width: 7.5rem;
  height: auto;
  min-height: 16.24rem;
  background: #fff;
}

.summImg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 16.93rem;
}

.adOuterWrap {
  width: 7.5rem;
  height: 100vh;
  background: #fff;
  flex-direction: column;
  overflow: hidden;

  .adBot {
    overflow: hidden;
    max-height: 2rem;

    span {
      display: block;
      width: 3.2rem;
      height: 0.8rem;
      // background: linear-gradient(45deg, rgba(103, 189, 25, 1) 0%, rgba(181, 232, 97, 1) 100%);
      background: @mainColor;
      border-radius: 0.1rem;
      font-size: 0.36rem;

      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 0.8rem;
      text-align: center;
      margin: 0.2rem auto 0.3rem;
    }
  }
}

.back {
  width: 100%;
  height: auto;

  .header_back {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    padding: 0.2rem 0.3rem;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .imgIcon {
      width: 0.4rem;
      height: 0.4rem;
    }

    .back {
      display: inline-block;
      margin-left: 0.1rem;
      font-weight: bold;
      color: #222;
      // width: 0.4rem;
      // height: 0.4rem;
      // font-size: 0.3rem;
    }
  }

  h2 {
    padding: 0 0.3rem;
    box-sizing: border-box;
    display: block;
    height: 0.8rem;
    font-size: 0.44rem;

    font-weight: bold;
    color: rgba(34, 34, 34, 1);
    line-height: 0.8rem;
  }
}
.create-btn {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  height: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -0.04rem 0.1rem 0px rgba(204, 204, 204, 0.2);
  span {
    display: block;
    margin: 0.2rem auto;
    width: 6rem;
    height: 0.88rem;
    background: @mainColor;
    border-radius: 0.44rem;
    text-align: center;
    line-height: 0.88rem;
    font-size: 0.3rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
